<template>
    <div>
        <div class="pie" id="pie" style="height: 400px"></div>
        <div class="map" id="map" style="height: 600px"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption;

onMounted(() => {
    var chartDom = document.getElementById("pie")!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    statApi().then((res) => {
        const pieData = res.data.salePie;
        const data: any[] = pieData.map((item) => ({
            name: item.name,
            value: item.yesterday_money,
        }));
        option = {
            // 提示组件，通常就是 鼠标移入的提示信息
            tooltip: {
                trigger: "item",
                backgroundColor: "rgba(0,0,0,.6)",
                textStyle: {
                    color: "#fff",
                },
                formatter: "{b}:{c}({d}%)",
            },
            legend: {
                orient: "vertical",
                left: "right",
                height: 100,
            },
            series: [
                {
                    type: "pie",
                    label: {
                        color: "inherit",
                    },
                    radius: ["40%", "70%"],
                    data,
                },
            ],
        };
        option && myChart.setOption(option);
    });

    /*
      地图的使用步骤：
        1. 准备一个有高度的div
        2. 引入一个 json 文件 ， 来自 https://datav.aliyun.com/portal/school/atlas/area_selector 网站
        3. 注册地图json数据
        4. 初始化 echarts 实例
        5. setOption({
          series ： {
            type: 'map',
            map : '上面注册的地图数据的名称'
          }
        })
    */
    var mapDom = document.getElementById("map")!;
    var mapChart = echarts.init(mapDom);
    // 地图比较特殊，需要先注册json数据
    echarts.registerMap("china", china as any);

    mapChart.setOption({
        tooltip: {
            trigger: "item",
            formatter: "{b}<br/>{c} (p / km2)",
        },
        toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {},
            },
        },
        visualMap: {
            min: 800,
            max: 50000,
            text: ["High", "Low"],
            realtime: false,
            calculable: true,
            inRange: {
                color: ["lightskyblue", "yellow", "orangered"],
            },
        },
        series: [
            {
                type: "map",
                map: "china",
                label: {
                    show: true,
                },
                data: [],
            },
        ],
    });
});
</script>

<style scoped>

</style>
